<template>
	
	<div>
		<el-form :model="queryForm" label-width="120px" :inline="true">
		  <el-form-item label="商品名称">
			<el-input v-model="queryForm.goodsName" clearable />
		  </el-form-item>
		  <el-form-item label="商品类型">
		  	<el-select v-model="queryForm.goodsType" clearable>
		  	  <el-option
		  	        v-for="item in goodsTypeList"
		  	        :key="item.id"
		  	        :label="item.name"
		  	        :value="item.id"
		  	      />
		  	</el-select>
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="init()">查询</el-button>
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="saveDialog = true">新增</el-button>
		  </el-form-item>
		</el-form>
	</div>

	<div style="margin-top: 1%;">
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="goodsName" label="名称" width="180" />
    <el-table-column prop="originPrice" label="原价" width="80" />
	<el-table-column prop="price" label="价格" width="80" />
	<el-table-column prop="goodsStatus" label="状态" width="80" />
	<el-table-column prop="goodsTypeName" label="类型" width="80" />
	<el-table-column prop="goodsSubTypeName" label="子类型" width="80" />
	<el-table-column prop="updateTime" label="修改时间" width="180" />
	<el-table-column label="操作">
	  <template #default="scope">
		<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
		  >修改</el-button
		>
		<el-button size="small" @click="handleDetail(scope.$index, scope.row)"
		  >详情</el-button
		>
		<el-button v-if="scope.row.goodsStatus == 0 || scope.row.goodsStatus == 2"
		  size="small"
		  type="danger"
		  @click="handleOn(scope.$index, scope.row.id)"
		  >上架</el-button
		>
		<el-button v-if="scope.row.goodsStatus == 1"
		  size="small"
		  type="danger"
		  @click="handleOff(scope.$index, scope.row.id)"
		  >下架</el-button
		>
		<el-button size="small" @click="handleSku(scope.$index, scope.row)"
		  >sku管理</el-button
		>
	  </template>
	</el-table-column>
	
  </el-table>
  </div>
  
  <div style="margin-top: 3%;">
	  <el-pagination background layout="prev, pager, next, total, sizes" 
		:total="total" 
		v-model:current-page="page" 
		:page-sizes="[10, 20, 50]" 
		v-model:page-size="pageSize"
		@size-change="init"
		@current-change="init"
		/>
	</div>
  
  <el-dialog v-model="saveDialog" title="添加商品">
      <el-form :model="saveForm" ref="saveRef">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="saveForm.goodsName" autocomplete="off" clearable required show-message="商品名称不能为空"/>
        </el-form-item>
		<el-form-item label="商品封面" :label-width="formLabelWidth">
			<el-upload
			    v-model:file-list="fileList"
			    class="upload-demo"
			    :action="uploadAction"
			    :on-change="handleChange"
				multiple
				:headers="adminHeader"
				:on-success="uploadSuccess"
			  >
			    <el-button type="primary">点击上传</el-button>
			    <template #tip>
			      <div class="el-upload__tip">
			        jpg/png 图片不能大于 500kb
			      </div>
			    </template>
			  </el-upload>
		</el-form-item>
        <el-form-item label="商品类型" :label-width="formLabelWidth">
          <el-select v-model="saveForm.goodsType" clearable :change="initGoodsSubType()">
            <el-option
                  v-for="item in goodsTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
          </el-select>
        </el-form-item>
		<el-form-item label="商品子类型" :label-width="formLabelWidth">
		  <el-select v-model="saveForm.goodsSubType" clearable>
		    <el-option
		          v-for="item in goodsSubTypeList"
		          :key="item.id"
		          :label="item.name"
		          :value="item.id"
		        />
		  </el-select>
		</el-form-item>
		<el-form-item label="原价" :label-width="formLabelWidth">
		  <el-input-number v-model="saveForm.originPrice" :precision="2" :step="0.1" :min="0" />
		</el-form-item>
		<el-form-item label="价格" :label-width="formLabelWidth">
		  <el-input-number v-model="saveForm.price" :precision="2" :step="0.1" :min="0" />
		</el-form-item>
		<el-form-item label="商品描述" :label-width="formLabelWidth">
		  <el-input v-model="saveForm.goodsDesc" autocomplete="off" clearable/>
		</el-form-item>
		<el-form-item label="商品详情" :label-width="formLabelWidth">
		  <el-input v-model="saveForm.goodsDetail" autocomplete="off" clearable/>
		</el-form-item>
		<!-- <el-form-item>
			<el-button @click="saveDialog = false">取消</el-button>
			<el-button type="primary" @click="saveHandler(saveRef)">
			  确定
			</el-button>
		</el-form-item> -->
      </el-form>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="saveDialog = false">取消</el-button>
	      <el-button type="primary" @click="saveHandler(saveRef)">
	        确定
	      </el-button>
	    </span>
	  </template>
    </el-dialog>
	
	<el-dialog v-model="updateDialog" title="修改商品">
	    <el-form :model="updateForm">
	      <el-form-item label="商品名称" :label-width="formLabelWidth">
	        <el-input v-model="updateForm.goodsName" autocomplete="off" clearable required show-message="商品名称不能为空"/>
	      </el-form-item>
			<el-form-item label="商品封面" :label-width="formLabelWidth">
				<el-upload
				    v-model:file-list="fileList"
				    class="upload-demo"
				    :action="uploadAction"
				    :on-change="handleChange"
					multiple
					:headers="adminHeader"
					:on-success="uploadSuccess"
				  >
				    <el-button type="primary">点击上传</el-button>
				    <template #tip>
				      <div class="el-upload__tip">
				        jpg/png 图片不能大于 500kb
				      </div>
				    </template>
				  </el-upload>
			</el-form-item>
	      <el-form-item label="商品类型" :label-width="formLabelWidth">
	        <el-select v-model="updateForm.goodsType" clearable :change="initGoodsSubType()">
	          <el-option
	                v-for="item in goodsTypeList"
	                :key="item.id"
	                :label="item.name"
	                :value="item.id"
	              />
	        </el-select>
	      </el-form-item>
			<el-form-item label="商品子类型" :label-width="formLabelWidth">
			  <el-select v-model="updateForm.goodsSubType" clearable>
			    <el-option
			          v-for="item in goodsSubTypeList"
			          :key="item.id"
			          :label="item.name"
			          :value="item.id"
			        />
			  </el-select>
			</el-form-item>
			<el-form-item label="原价" :label-width="formLabelWidth">
			  <el-input-number v-model="updateForm.originPrice" :precision="2" :step="0.1" :min="0" />
			</el-form-item>
			<el-form-item label="价格" :label-width="formLabelWidth">
			  <el-input-number v-model="updateForm.price" :precision="2" :step="0.1" :min="0" />
			</el-form-item>
			<el-form-item label="商品描述" :label-width="formLabelWidth">
			  <el-input v-model="updateForm.goodsDesc" autocomplete="off" clearable/>
			</el-form-item>
			<el-form-item label="商品详情" :label-width="formLabelWidth">
			  <el-input v-model="updateForm.goodsDetail" autocomplete="off" clearable/>
			</el-form-item>
			<!-- <el-form-item>
				<el-button @click="saveDialog = false">取消</el-button>
				<el-button type="primary" @click="saveHandler(saveRef)">
				  确定
				</el-button>
			</el-form-item> -->
	    </el-form>
		  <template #footer>
		    <span class="dialog-footer">
		      <el-button @click="updateDialog = false">取消</el-button>
		      <el-button type="primary" @click="updateHandler()">
		        确定
		      </el-button>
		    </span>
		  </template>
	  </el-dialog>
	
	<el-dialog v-model="detailDialog" title="商品详情">
	    <el-form :model="detailForm">
	      <el-form-item label="商品名称" :label-width="formLabelWidth">
	        <el-input v-model="detailForm.goodsName" disabled/>
	      </el-form-item>
			<el-form-item label="商品封面" :label-width="formLabelWidth">
				<el-image
				  style="width: 100px; height: 100px"
				  :src="detailForm.url"
				  :zoom-rate="1.2"
				  :preview-src-list="detailForm.srcList"
				  :initial-index="4"
				  fit="cover"
				/>
			</el-form-item>
	      <el-form-item label="商品类型" :label-width="formLabelWidth">
			<el-input v-model="detailForm.goodsTypeName" disabled/>
	      </el-form-item>
			<el-form-item label="商品子类型" :label-width="formLabelWidth">
			  <el-input v-model="detailForm.goodsSubTypeName" disabled/>
			</el-form-item>
			<el-form-item label="原价" :label-width="formLabelWidth">
			  <el-input-number v-model="detailForm.originPrice" disabled/>
			</el-form-item>
			<el-form-item label="价格" :label-width="formLabelWidth">
			  <el-input-number v-model="detailForm.price" disabled />
			</el-form-item>
			<el-form-item label="商品描述" :label-width="formLabelWidth">
			  <el-input v-model="detailForm.goodsDesc" disabled/>
			</el-form-item>
			<el-form-item label="商品详情" :label-width="formLabelWidth">
			  <el-input v-model="detailForm.goodsDetail" disabled/>
			</el-form-item>
	    </el-form>
		  <template #footer>
		    <span class="dialog-footer">
		      <el-button @click="detailDialog = false">取消</el-button>
		      <el-button type="primary" @click="detailDialog = false">
		        确定
		      </el-button>
		    </span>
		  </template>
	  </el-dialog>
	  
	  <el-dialog v-model="skuDialog" :title="goodsSkuInfo.title">
	      <el-form :model="skuForm">
	        <el-form-item
	              v-for="(domain, index) in skuForm.skus"
	              :key="domain.key"
	              :prop="'domains.' + index + '.value'"
				  :label="'款式' + (index + 1) + ':'"
	            >
				<el-row :gutter="10">
				    <el-col :span="6">
						<el-select v-model="domain.size" clearable placeholder="尺码" filterable>
						    <el-option
						      v-for="item in this.global.enumList.goodsSize"
						      :key="item.key"
						      :label="item.value"
						      :value="item.key"
						    />
						  </el-select>
					</el-col>
				    <el-col :span="6">
						<el-select v-model="domain.color" clearable placeholder="颜色" filterable>
						    <el-option
						      v-for="item in this.global.enumList.goodsColor"
						      :key="item.key"
						      :label="item.value"
						      :value="item.key"
						    />
						  </el-select>
					</el-col>
					<el-col :span="6">
						<el-input-number v-model="domain.stock" placeholder="库存" :min="0"/>
					</el-col>
					<el-col :span="6" v-if="index > 0">
						<el-button class="mt-2" @click.prevent="removeSku(domain)">删除</el-button>
					</el-col>
				</el-row>
			</el-form-item>
	  		
	      </el-form>
	  	  <template #footer>
	  	    <span class="dialog-footer">
				<el-button @click="addSku">增加一条</el-button>
	  	      <el-button @click="skuDialog = false">取消</el-button>
	  	      <el-button type="primary" @click="skuSaveHandler">
	  	        确定
	  	      </el-button>
	  	    </span>
	  	  </template>
	    </el-dialog>
</template>

<script>
//import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
export default {
	name: 'goods',
	created() {
	    this.init()
		this.uploadAction = this.global.baseUrl + 'image/upload'
		this.initGoodsType()
	},
	data() {
		return {
			tableData: [],
			total: 0,
			page: 1,
			pageSize: 20,
			saveDialog: false,
			updateDialog: false,
			detailDialog: false,
			skuDialog: false,
			queryForm: {
				goodsName: '',
				goodsType: ''
			},
			saveForm: {
				goodsName: '',
				goodsImages: [],
				goodsType: '',
				goodsSubType: '',
				originPrice: 0,
				price: 0,
				goodsDesc: '',
				goodsDetail: ''
			},
			updateForm: {
				id: 0,
				goodsName: '',
				goodsImages: [],
				goodsType: '',
				goodsSubType: '',
				originPrice: 0,
				price: 0,
				goodsDesc: '',
				goodsDetail: ''
			},
			formLabelWidth: '100px',
			fileList: [],
			adminHeader: {
				token: sessionStorage.getItem('token')
			},
			uploadAction: '',
			detailForm: {
				goodsName: '',
				srcList: [],
				url: '',
				goodsType: '',
				goodsSubType: '',
				goodsTypeName: '',
				goodsSubTypeName: '',
				originPrice: 0,
				price: 0,
				goodsDesc: '',
				goodsDetail: ''
			},
			skuForm: {
				skus: [
					{
						key: 1,
						value: ''
					}
				]
			},
			goodsSkuInfo: {
				id: 0,
				title: ''
			},
			goodsTypeList: [],
			goodsSubTypeList: []
		}
	},
	methods: {
		init() {
			this.$axios.post('goods/list',
			{
				page: this.$data.page,
				pageSize: this.$data.pageSize,
				goodsName: this.queryForm.goodsName,
				goodsType: this.queryForm.goodsType
			})
			.then(response => {
				this.$data.tableData = response.list
				this.$data.total = response.total
			}).catch(error => {
				console.log(error)
			})
		},
		initGoodsType() {
			this.$axios.get('goods/type/0')
			.then(response => {
				//console.log(response)
				this.$data.goodsTypeList = response
			}).catch(error => {
				console.log(error)
			})
		},
		initGoodsSubType() {
			this.$data.goodsSubTypeList = []
			let goodsType = this.$data.saveForm.goodsType
			if (!goodsType) {
				return
			}
			this.$axios.get('goods/type/' + this.$data.saveForm.goodsType)
			.then(response => {
				console.log(response)
				this.$data.goodsSubTypeList = response
			}).catch(error => {
				console.log(error)
			})
		},
		handleOn(idx, id) {
			this.$axios.put('goods/on/' + id)
			.then(response => {
				this.init()
			}).catch(error => {
				console.log(error)
			})
		},
		handleOff(idx, id) {
			this.$axios.put('goods/off/' + id)
			.then(response => {
				this.init()
			}).catch(error => {
				console.log(error)
			})
		},
		handleSku(idx, rowData) {
			this.$data.skuForm.skus = [{
						key: 1,
						value: ''
					}]
			this.$data.goodsSkuInfo.title = rowData.goodsName
			this.$data.goodsSkuInfo.id = rowData.id
			this.$data.skuDialog = true
			//查询商品sku列表
			this.$axios.get('goods/sku/list/' + rowData.id)
			.then(response => {
				if (response.length > 0) {
					this.$data.skuForm.skus = []
				}
				for (let i = 0; i < response.length; i ++) {
					let sku = response[i]
					this.$data.skuForm.skus.push({
						key: sku.id,
						size: sku.size,
						color: sku.color,
						stock: sku.stock
					})
				}
				
			}).catch(error => {
				console.log(error)
			})
		},
		addSku() {
			this.$data.skuForm.skus.push({
				key: Date.now(),
				value: ''
			})
		},
		removeSku(skuItem) {
			const index = this.$data.skuForm.skus.indexOf(skuItem)
			  if (index !== -1) {
			    this.$data.skuForm.skus.splice(index, 1)
			  }
		},
		handleEdit(idx, rowData) {
			Object.assign(this.$data.updateForm, rowData)
			let images = this.$data.updateForm.goodsImages
			this.$data.updateForm.url = this.global.baseUrl + 'image/' + images[0]
			this.$data.updateForm.srcList = []
			for (var i=0; i<images.length; i++) {
				this.$data.updateForm.srcList.push(this.global.baseUrl + 'image/' + images[i])
			}
			this.$data.updateDialog = true
		},
		handleChange(uploadFile, uploadFiles) {
			
		},
		uploadSuccess(response, uploadFile, uploadFiles) {
			if (response.code !== 0) {
				this.msg.error(response.msg)
			} else {
				this.$data.saveForm.goodsImages.push(response.data)
			}
		},
		saveHandler(saveRef) {
			this.$axios.post('goods/save', this.$data.saveForm)
			.then(response => {
				this.msg.success('商品保存成功')
				this.$data.saveDialog = false
				this.init()
			}).catch(error => {
				console.log(error)
			})
		},
		updateHandler() {
			this.$axios.post('goods/update', this.$data.updateForm)
			.then(response => {
				this.msg.success('商品修改成功')
				this.$data.updateDialog = false
				this.init()
			}).catch(error => {
				console.log(error)
			})
		},
		skuSaveHandler() {
			let goodsId = this.$data.goodsSkuInfo.id
			let skuList = []
			for (var i=0; i<this.$data.skuForm.skus.length; i++) {
				let sku = this.$data.skuForm.skus[i]
				//if (sku.size)
				skuList.push({
					size: sku.size,
					color: sku.color,
					stock: sku.stock
				})
			}
			//TODO 验证
			//console.log(skuList)
			this.$axios.post('goods/sku/save', {
				goodsId: goodsId,
				skuList: skuList
			})
			.then(response => {
				this.msg.success('保存成功')
				this.$data.skuDialog = false
			}).catch(error => {
				console.log(error)
			})
		},
		cancelHandler() {
			
		},
		handleDetail(idx, rowData) {
			//this.$data.detailForm = rowData
			Object.assign(this.$data.detailForm, rowData)
			let images = this.$data.detailForm.goodsImages
			this.$data.detailForm.url = this.global.baseUrl + 'image/' + images[0]
			this.$data.detailForm.srcList = []
			for (var i=0; i<images.length; i++) {
				this.$data.detailForm.srcList.push(this.global.baseUrl + 'image/' + images[i])
			}
			this.$data.detailDialog = true
		}
	}
	
}

</script>
